import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import AntdIcon from 'antd/lib/icon';

/**
 * 字体图标，兼容antd的图标
 *
 * 组件模仿：https://lanif-ui.github.io/dva-boot-admin/#/dva-boot-admin/icons
 *
 * alibaba iconfont 使用说明：https://www.iconfont.cn/help/detail
 * alibaba iconfont 链接获取地址：https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1084310
 * antd 自定义图标：https://ant.design/components/icon-cn/#%E8%87%AA%E5%AE%9A%E4%B9%89-font-%E5%9B%BE%E6%A0%87
 */
const IconAntdFont = AntdIcon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成; 可以团队合作在线操作这个库
});

const iconTypes = {
  antd: 'antd',
  aliIconfont: 'iconfont',
  icomoon: 'icomoon',//这个查看：lanif-ui ，要在本地加入 字体库（ttf、woff、svg、eot）和 css (iconfont.less)
};

class Icon extends React.PureComponent {
  static propTypes = {
    type: PropTypes.string,
    iconType: PropTypes.string,//取值 antd、iconfont、icomoon
    prefixCls: PropTypes.string,
    className: PropTypes.string,
    children: PropTypes.node,
    font: PropTypes.string,
    spin: PropTypes.bool
  };

  static defaultProps = {
    type: undefined,
    iconType: 'antd',//图片仓库
    prefixCls: 'antui-icon',
    className: '',
    font: 'ad',
    children: undefined,
    spin: false,
  };

  render() {
    const {
      prefixCls,
      type,
      className,
      children,
      font,
      iconType,
      spin,
      ...props
    } = this.props;
    const cn = classnames(
      prefixCls,
      {
        [font]: font,
        [`${font  }-${  type}`]: font && type,
        spin
      },
      className
    );
    if (/^&#x.+;$/.test(type)) {
      return <i className={cn} {...props} dangerouslySetInnerHTML={{__html: type}}/>;
    }
    return iconType === iconTypes.antd ?
      <AntdIcon type={type} className={className} spin={spin} {...props}>
        {children}
      </AntdIcon> : iconType === iconTypes.aliIconfont ?
        <IconAntdFont type={type} className={className} spin={spin} {...props} /> :
        (
          <i className={cn} {...props}>
            {children}
          </i>
        );
  }
}

export default Icon;
